<template>
    <div style="display: flex">
      <div>
        <div>
          <el-select
            v-model="keywords"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            :clearable="true"
            size="mini"
            @change="currentSelect"
            style="width: 500px;"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item"
              class="one-text"
            >
            
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.district
              }}</span>
            </el-option>
          </el-select>
          &nbsp;
          <el-select v-model="size" placeholder="请选择范围">
            <el-option
              v-for="item in sizes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <br>
        <div id="container" class="container"></div>
      </div>
    </div>
  </template>
   
  <script>
  import AMapLoader from "@amap/amap-jsapi-loader";
  window._AMapSecurityConfig = {
    // 安全密钥
    securityJsCode: "07364b815401b7fd9c22ac7cc4e9ea16",
  };
  export default {
    name: "TestIndex",
    props:{
      lng: Number,
      lat: Number,
    },//接收父传入的值
    data() {
      return {
        // 地图实例
        map: null,
        // 标记点
        marker: "",
        // 地址逆解析
        geoCoder: null,
        // 搜索提示
        AutoComplete: null,
        // 搜索关键字
        keywords: "",
        // 位置信息
        form: {
          lng: "",
          lat: "",
          address: "",
          adcode: "", //地区编码
        },
        // 搜索节流阀
        loading: false,
        // 搜索提示信息
        options: [],
        // 选择尺寸
        sizes: [{
          value: '100',
          label: '100'
        }, {
          value: '200',
          label: '200'
        }, {
          value: '500',
          label: '500'
        }, {
          value: '1000',
          label: '1000'
        }, {
          value: '2000',
          label: '2000'
        }],
        // 选择的select
        size:"",
        
        addressContent:"",
      };
    },
    methods: {
      initMap() {
        AMapLoader.load({
          // 你申请的Key
          key: "79dbe40608c111595c53768ecc1a3abe",
          version: "2.0",
          // 需要用到的插件
          plugins: ["AMap.Geocoder", "AMap.AutoComplete","AMap.Geolocation"],
        })
          .then((AMap) => {
            this.map = new AMap.Map("container", {
              viewMode: "3D", //是否为3D地图模式
              zoom: 15, //初始化地图级别
              center: [105.602725, 37.076636], //初始化地图中心点位置
            });
            //地址逆解析插件
            this.geoCoder = new AMap.Geocoder({
              city: "010", //城市设为北京，默认：“全国”
              radius: 1000, //范围，默认：500
            });
            // 获取当前定位
            this.map.addControl(new AMap.Geolocation())
            // 搜索提示插件
            this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
            //点击获取经纬度;
            this.map.on("click", (e) => {
              // 获取经纬度
              this.form.lng = e.lnglat.lng;
              this.form.lat = e.lnglat.lat;
              // 清除点
              this.removeMarker();
              // 标记点
              this.setMapMarker();
            });
            //逆行解析
            this.setMapMarker();
          })
          .catch((err) => {
            // 错误
            console.log(err);
          });
      },
      // 标记点
      setMapMarker() {
        // 自动适应显示想显示的范围区域
        this.map.setFitView();
        this.marker = new AMap.Marker({
          map: this.map,
          position: [this.form.lng, this.form.lat],
        });
        // 逆解析地址
        this.toGeoCoder();
        this.map.setFitView();
        this.map.add(this.marker);
        this.addressContent = {
          lng:this.form.lng,
          lat:this.form.lat,
          name:this.form.address,
          size:this.size,
        }
        console.log(this.form)
        console.log(this.addressContent);

        this.$emit('addressContent',this.addressContent);
      },
      // 清除点
      removeMarker() {
        if (this.marker) {
          this.map.remove(this.marker);
        }
      },
      // 逆解析地址
      toGeoCoder() {
        let lnglat = [this.form.lng, this.form.lat];
        this.geoCoder.getAddress(lnglat, (status, result) => {
          if (status === "complete" && result.regeocode) {
            this.form.address = result.regeocode.formattedAddress;
          }
        });
      },
      // 搜索
      remoteMethod(query) {
        if (query !== "") {
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.AutoComplete.search(query, (status, result) => {
              this.options = result.tips;
            });
          }, 200);
        } else {
          this.options = [];
        }
      },
      // 选中提示
      currentSelect(val) {
        // 清空时不执行后面代码
        console.log(val);
        if (!val) {
          return;
        }
        this.form = {
          lng: val.location.lng,
          lat: val.location.lat,
          address: val.district + val.address,
          adcode: val.adcode,
        };
        // 清除点
        this.removeMarker();
        // 标记点
        this.setMapMarker();
      },
    },
    mounted() {
      this.form.lat = this.lat;
      this.form.lng = this.lng;
      this.form.address = "陕西省咸阳市秦都区上林街道丰宁路";
      this.initMap();
      // this.remoteMethod("陕西省西安市雁塔区漳浒寨街道西安城市科技职业学校");  
    },
  };
  </script>
   
  <style scoped>
  .container {
    width: 160%;
    height: 600px;
  }
  </style>